<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>



<!--https://element.eleme.cn/#/zh-CN/component/progress -->
<div id="app5">
	<el-progress :text-inside="true" :stroke-width="26" :percentage="progressNum" ></el-progress>
	<el-progress :text-inside="true" :stroke-width="24" :percentage="progressNum" status="success"></el-progress>
	<el-progress :text-inside="true" :stroke-width="22" :percentage="progressNum" status="warning"></el-progress>
	<el-progress :text-inside="true" :stroke-width="20" :percentage="progressNum" status="exception"></el-progress>
</div>

<script type="text/javascript">
	//组件初始化
	var Main = {
		data() {
			return {
                progressNum: 0,//设置值
            }
        },
        methods: {
        	startProgress () {
        		this.startTimer = setInterval(() => {
        			this.progressNum +=10;
        			if (this.progressNum > 99) {
        				clearInterval(this.startTimer)
        			}
        		}, 1000); 
        	},

        },
        mounted() {//钩子函数
        	this.startProgress()
        } 
    }

    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app5');
</script>
